import React, { CSSProperties } from 'react';
import LoadingEl from './loadingItem';
import ReactDOM from 'react-dom/client';
import { ConfigContext } from '../config-provider';
import './style/index.less';
interface loadingParams {
  target?: string;
  text?: string;
  background?: string;
  icon?: string;
  duration?: number;
  style?: CSSProperties;
}
const ELe = document.createElement('div');
const root = ReactDOM.createRoot(ELe);

// const { getPrefixCls } = React.useContext(ConfigContext);
// const prefixCls = getPrefixCls('loading');

const Loading = {
  El: 'body',
  childrenRef: React.createRef(),
  show: (p?: loadingParams): void => {
    if (p?.target) {
      Loading.El = p.target;
    }
    //渲染DOM
    root.render(
      <LoadingEl
        open
        text={p?.text}
        background={p?.background}
        icon={p?.icon}
        target={Loading.El}
        duration={p?.duration}
        cRef={Loading.childrenRef}
        style={p?.style}
      />,
    );
    //置入到指定节点下
    const container =
      Loading.El === 'body'
        ? document.body
        : document.querySelector(Loading.El);
    if (container) {
      container.appendChild(ELe);
    }
    setTimeout(() => {});
  },
  close: (): void => {},
};

export default Loading;
